<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理 - 企业培训平台</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <style>
        /* Page header and button container */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        /* Student list table styles */
        .student-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            border-radius: 8px;
            overflow: hidden; /* Ensure rounded corners apply to table content */
        }

        .student-table th, .student-table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        .student-table th {
            background-color: #f2f2f2;
            font-weight: bold;
            color: #333;
            text-transform: uppercase;
            font-size: 0.9em;
        }

        .student-table tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }

        .student-table tbody tr:hover {
            background-color: #e9e9e9;
        }

        /* Action button styles */
        .action-buttons {
            display: flex;
            gap: 5px; /* Spacing between buttons */
            flex-wrap: wrap; /* Allow buttons to wrap on smaller screens */
        }

        .action-buttons .btn {
            padding: 6px 12px;
            font-size: 0.85em;
            border-radius: 5px;
            text-decoration: none;
            transition: background-color 0.3s ease;
            white-space: nowrap; /* Prevent button text from wrapping */
        }

        .action-buttons .btn-info {
            background-color: #17a2b8;
            color: white;
            border: none;
        }
        .action-buttons .btn-info:hover {
            background-color: #138496;
        }

        .action-buttons .btn-warning {
            background-color: #ffc107;
            color: #212529;
            border: none;
        }
        .action-buttons .btn-warning:hover {
            background-color: #e0a800;
        }

        .action-buttons .btn-danger {
            background-color: #dc3545;
            color: white;
            border: none;
        }
        .action-buttons .btn-danger:hover {
            background-color: #c82333;
        }

        /* Message alert box */
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }

        .alert-success {
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
        }

        .alert-danger {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }

        /* Message when no students are found */
        .no-students-message {
            text-align: center;
            padding: 30px;
            background-color: #f8f9fa;
            border-radius: 8px;
            margin-top: 20px;
            color: #6c757d;
            font-size: 1.1em;
        }

        /* Search form styles */
        .search-form {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        .search-form input[type="text"] {
            flex-grow: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            min-width: 150px; /* Ensure input is not too small */
        }

        .search-form button {
            padding: 10px 15px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            transition: background-color 0.3s ease;
        }

        .search-form button:hover {
            background-color: #0056b3;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .page-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            .search-form {
                flex-direction: column;
            }
            .student-table th, .student-table td {
                padding: 8px 10px;
                font-size: 0.8em;
            }
            .action-buttons {
                flex-direction: column;
                gap: 3px;
            }
            .action-buttons .btn {
                width: 100%;
                text-align: center;
            }
        }
    </style>
</head>
<body>
<div th:replace="~{fragments/header :: header}"></div> <div class="main-content">
    <div class="container">
        <div class="page-header">
            <h1 class="page-title">学生管理</h1>
            <a th:href="@{/student/create}" class="btn btn-primary">添加新学生</a>
        </div>

        <div th:if="${successMessage}" class="alert alert-success">
            <p th:text="${successMessage}"></p>
        </div>
        <div th:if="${errorMessage}" class="alert alert-danger">
            <p th:text="${errorMessage}"></p>
        </div>

        <form th:action="@{/student/manage}" method="get" class="search-form">
            <input type="text" name="name" placeholder="按学生姓名搜索" th:value="${param.name != null ? param.name : ''}">
            <button type="submit">搜索</button>
        </form>

        <div th:if="${!#lists.isEmpty(students)}">
            <table class="student-table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>学生姓名</th>
                    <th>学号</th>
                    <th>学习时间</th>
                    <th>积分</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr th:each="student : ${students}">
                    <td th:text="${student.id}"></td>
                    <td th:text="${student.stuName}"></td>
                    <td th:text="${student.stuNum}"></td>
                    <td th:text="${student.stuStudyTime != null ? student.stuStudyTime : '0'} + ' 小时'"></td>
                    <td th:text="${student.stuScore != null ? student.stuScore : '0'}"></td>
                    <td class="action-buttons">
                        <a th:href="@{/student/edit/{id}(id=${student.id})}" class="btn btn-warning">编辑</a>
                        <form th:action="@{/student/delete/{id}(id=${student.id})}" method="post" style="display: inline;">
                            <button type="submit" class="btn btn-danger" onclick="return confirm('确定要删除该学生吗？');">删除</button>
                        </form>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
        <div th:if="${#lists.isEmpty(students)}" class="no-students-message">
            <p th:if="${param.name != null and param.name != ''}">
                没有找到姓名为 "<strong th:text="${param.name}"></strong>" 的学生。请尝试其他搜索词或清空搜索框查看所有学生。
            </p>
            <p th:unless="${param.name != null and param.name != ''}">
                目前还没有学生记录。请点击上方“添加新学生”按钮添加。
            </p>
        </div>
    </div>
</div>
</body>
</html>